<template>
  <div class="select-box">
    <el-select
      v-model="value"
      clearable
      placeholder="国家"
      :fit-input-width="true"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
  </div>
  <div class="phone">
    <el-input
      type="tel"
      placeholder="请输入手机号"
      v-model="phone"
      clearable
      @blur="isValidPhone"
    >
      <template v-slot:prepend>
        <p>国家码</p>
        <p>+86</p>
      </template>
    </el-input>
  </div>
  <div class="yanzhengma">
    <el-input placeholder="请输入验证码" v-model="yzm">
      <template v-slot:append>{{ showYzm }}</template>
    </el-input>
  </div>
  <div class="user-xieyi">
    <el-checkbox size="large" />
    已阅读并同意小米账号 <a href="javascript:;">用户协议</a> 和
    <a href="javascript:;">隐私政策</a>
  </div>
  <div class="btn-login">
    <el-button
      class="register"
      type="primary"
      @click="dialogVisible = !dialogVisible"
      >注册</el-button
    >
    <el-dialog v-model="dialogVisible" title="注册" width="30%">
      <register-input :form="form"></register-input>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="subimtForm">确认</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
  <div class="noPwd-phoneLogin">
    <a href="javascript:;">收不到验证码?</a>
  </div>
</template>

<script>
import RegisterInput from "./RegisterInput.vue";
import { reactive, toRefs, ref, getCurrentInstance, onUpdated } from "vue";
import { useStore } from "vuex";
export default {
  name: "Register",
  components: {
    RegisterInput,
  },
  setup() {
    onUpdated(()=>{
      console.log(form);
    })

    const store = useStore();
    const { proxy } = getCurrentInstance();

    //对话框显示
    const dialogVisible = ref(false);
    const showYzm = ref("");
    const arr =
      "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOOPQRSTUVWXYZ".split(
        ""
      );

    // 表单数据
    const register = reactive({
      options: [
        {
          value: "中国",
          label: "中国",
        },
        {
          value: "美国",
          label: "美国",
        },
        {
          value: "俄罗斯",
          label: "俄罗斯",
        },
        {
          value: "英国",
          label: "英国",
        },
        {
          value: "法国",
          label: "法国",
        },
      ],
      value: "",
      phone: "",
      yzm: "",
    });
    // 用户信息
    const form = reactive({
      name: "",
      pwd: "",
      isTrue: false,
    });
    randomYzm();

    //创建账户
    function subimtForm() {
      if (form.isTrue) {
        store.commit("user/createUser", form);
        dialogVisible.value = false;
        proxy.$message.success('用户创建成功')
      }else {
        proxy.$message.error('账号有误')
      }
    }
    //验证手机号
    function isValidPhone() {
      const reg = /^1[3578]\d{9}$/;
      !reg.test(register.phone) && proxy.$message.error("手机号有误");
    }

    //验证码
    function randomYzm() {
      showYzm.value = "";
      for (let i = 0; i < 5; i++) {
        showYzm.value += arr[parseInt(Math.random() * 62)];
      }
    }
    return {
      ...toRefs(register),
      dialogVisible,
      showYzm,
      isValidPhone,
      randomYzm,
      subimtForm,
      form,
    };
  },
};
</script>

<style lang="less" scoped>
.select-box {
  margin-top: 33px;
  .el-select {
    :deep(.el-input__inner) {
      width: 288px;
      height: 50px;
    }
  }
}
.phone {
  margin-top: 20px;
  .el-input {
    width: 330px;
    height: 50px;
    :deep(.el-input-group__prepend) {
      display: block;
      p {
        &:first-child {
          font-size: 12px;
          height: 20px;
        }
      }
    }
  }
}
.yanzhengma {
  margin-top: 20px;
  .el-input {
    width: 330px;
    height: 50px;
  }
}
.user-xieyi {
  position: relative;
  margin-top: 20px;
  font-size: 14px;
  text-indent: 2em;
  color: #aaa;
  a {
    color: black;
  }
  .el-checkbox {
    position: absolute;
    top: -10px;
    left: 0;
  }
}
.btn-login {
  .register {
    margin: 20px 16px 10px;
    width: 288px;
    height: 60px;
    font-size: 18px;
  }
}
.noPwd-phoneLogin {
  a {
    color: #409eff;
  }
}
</style>